<template>
	<view>
		<u-navbar title="账户认证" :autoBack="true"></u-navbar>
		<view class="container">
			<u-alert :title="title" type="error" :description="description"></u-alert>
			<view class="main_card">

				<view class="ID1">
					<text class="ID-title">收款码（银行卡，微信，支付宝均可支付）</text>

					<view class="" style="width: 300rpx;position: relative;margin-top: 10px;margin-bottom: 10px;">
						<u--image :showLoading="true" :src="src1" width="150px" height="150px"></u--image>
					</view>
				</view>

				<view class="ID2">
					<text class="ID-title">上传打款截图</text>
					<view class="" style="width: 194rpx;position: relative;margin-top: 10px;">
						<robby-image-upload4 :src="src2" :width="width" :height="height" :lineheight="lineheight"
							:borderRadius="borderRadius"></robby-image-upload4>
					</view>
				</view>

				<view class="bottom_btn">
					<button class="given" @tap="confirmPay">确认支付，立即认证</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import robbyImageUpload4 from '@/components/robby-image-upload/robby-image-upload4.vue';
	export default {
		data() {
			return {
				title: '',
				description: '温馨提示：请支付人民币1.8元，作为认证费用，否则认证将无法通过！！！',

				src1: 'https://liande.oss-cn-beijing.aliyuncs.com/hongming/auth_pay.png',
				src2: '',
				width: '194upx',
				height: '194upx',
				lineheight: '194upx',
				borderRadius: '50%',
			}
		},

		components: {
			robbyImageUpload4
		},

		onLoad() {
			if (!this.hasLogin) {
				this.$api.msg('尚未登录，请先登录');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
				return false;
			}

			uni.$on('changePay', (option) => {
				this.src2 = option.path
				// console.log(this.src2)
			})
		},

		computed: {
			...mapState(['hasLogin']),
		},

		methods: {

			confirmPay() {
				if (!this.src2) {
					this.$api.msg('必须上传打款截图！')
					return false;
				}

				let dataObj = {
					token: uni.getStorageSync('token'),
					icon: this.src2,
				}

				this.auth_apply(dataObj);
			},

			async auth_apply(dataObj) {
				// console.log(dataObj)
				let res = await this.$myRequest({
					url: '/userAuthPay',
					methods: 'POST',
					data: dataObj
				})

				// console.log(res)

				this.$api.msg(res.data.msg);
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/user/user-auth'
					})
				}, 1000)
			},

			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f6f6f6;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.container {
		position: relative;
		top: 160rpx;
	}

	.weer {
		margin: 60rpx 0 120rpx 0;
		font-size: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.weer p {
		margin-top: 30rpx;
	}

	.back {
		width: 100%;
		text-align: center;
		background-color: #f84115;
		border-radius: 50rpx;
		font-size: 26rpx;
		color: #ffffff;
		padding: 20rpx 0;
	}

	.main_card {
		margin-top: 10rpx;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		padding-top: 0;
		background-color: #fff;
		height: 700rpx;
	}

	.card_d {
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 30rpx;
		padding: 30rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.input_phone {
		display: flex;
		align-items: center;
		padding: 22rpx 0rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f4f4f4;

	}

	.left_txt {
		font-size: 26rpx;
		color: #121212;
		min-width: 140rpx;
	}

	.tips {
		background: #EFF8FF;
		margin-top: 40rpx;
		padding: 24rpx 30rpx;
		border-radius: 10rpx;
		color: #FF0000;
		font-size: 20rpx;
	}

	.bottom_btn {
		border-radius: 70rpx;
		text-align: center;
		color: #fff;
		font-size: 26rpx;
		height: 74rpx;
		line-height: 74rpx;
		margin-top: 54rpx;
	}

	.ID-title {
		font-size: 26rpx;
	}

	.given {
		margin-top: 40rpx;
		width: 100%;
		padding: 10rpx 0;
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 26rpx;
		text-align: center;
		background: linear-gradient(to right, #fe6600, #fe6601);
	}

	.dialog {
		border-radius: 10rpx;
		padding: 40rpx 20rpx;
	}

	.dialog_title {
		font-size: 28rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #e3e3e3;
	}

	.consum {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 14rpx;
	}

	.consum_left {
		display: flex;
		align-items: center;
	}

	.consum_left p {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #464648;
	}

	.consum_left span {

		color: #c97d5a;
	}

	.amount {
		font-size: 32rpx;
		color: #e20d0d;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	.figure {
		margin: 30rpx 0;
		font-size: 26rpx;
		line-height: 30px;
	}

	.payBtn {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.payBtn view {
		width: 48%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
		border-radius: 50rpx;
		padding: 22rpx 0;
		/* margin-top: 50rpx; */
	}
</style>